<!DOCTYPE html>
<!-- D:\前端\收集的网站模板\主页_多种head和样式\template-menu-left.html-->
<html lang="en">
<!--<![endif]-->

<!-- Mirrored from edena-creative-multipurpose-bootstrap-theme.little-neko.com/files/template-menu-left.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 25 Aug 2015 04:29:50 GMT -->
<!-- Added by HTTrack -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/><!-- /Added by HTTrack -->
<head>

    <!-- Basic Page Needs ================================================== -->
    <meta charset="utf-8">
    <title>AntBlog 我的项目</title>
    <meta name="description" content="neko-description">
    <meta name="author" content="Little NEKO">
    <!-- Mobile Specific Metas ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- CSS ================================================== -->
    <!-- web font  -->
    <!--    <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>-->

    <!-- Neko framework  -->
    <link type="text/css" rel="stylesheet" href="css/docs/custom-icons.css">
    <link type="text/css" rel="stylesheet" href="css/docs/neko-framework/external-plugins/external-plugins.min.css">
    <link type="text/css" rel="stylesheet" href="css/docs/neko-framework/css/layout/neko-framework-layout.css">
    <link type="text/css" rel="stylesheet" id="color" href="css/docs/neko-framework/css/color/neko-framework-color.css">
    <style>
        .header_container {
            margin-left: 0;
            margin-right: 0;
            width: 100%;
        }

        .row p {
            margin-bottom: 10px;
        }

        .pro-top {
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
            padding: 20px 0px;
            margin-bottom: 10px;
        }

        .pro-top h3 {
        }

        .pro-content {
            min-height: 30em;
            padding: 3px 0px;
            border: 1px solid transparent;
            border-color: #e6e6e6
        }
    </style>
</head>
<body class="activate-appear-animation header-7">

<div class="headerPage"></div>
<!-- global-wrapper -->
<div id="global-wrapper">
    <!-- content -->
    <main id="content">
        <header class="page-header">

            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <h1>Page
                            <small>with a left sidebar</small>
                        </h1>
                    </div>
                    <div class="col-md-6">
                        <!--                        <ol class="breadcrumb">-->
                        <!--                            <li><a href="#">Home</a></li>-->
                        <!--                            <li><a href="#">Library</a></li>-->
                        <!--                            <li class="active">Data</li>-->
                        <!--                        </ol>-->
                    </div>
                </div>
            </div>

        </header>
        <!-- page -->
        <section class="pt pb-medium">
            <div class="container">
                <div class="row">
                    <!-- sub menu -->
                    <aside id="sidebar" class="col-md-3">
                        <nav class="sidebar-menu mb-xs">
                            <ul class="project-menu">
                                <li v-for="item in proList"><a :class="setClass(item.projectCode)"
                                                               @click.prevent="forward(item.projectCode)">{{item.projectName}}</a>
                                </li>
                            </ul>
                        </nav>
                    </aside>
                    <!-- / sub menu -->
                    <!-- content -->
                    <section class="col-md-9">
                        <div class="row pro-top">
                            <div class="col-md-8">
                                <h2>{{project.projectName}}</h2>
                                <h3>项目作者 : {{project.projectUser}}</h3>
                                <h3>项目标签 : {{project.projectTag}}</h3>
                                <h3>项目地址 : <a :href="setPath(project.projectPath)" target="blank">{{project.projectPath}}</a>
                                </h3>
                            </div>
                            <div class="col-md-3">
                                <img :src="getImg(project.projectIcon)" alt=""
                                     class="responsive"/></a>
                            </div>
                        </div>
                        <div class="row  pro-content">
                            <div class="col-md-8">
                                <p v-for="item in project.desc">{{item}}</p>
                            </div>
                            <div class="col-md-12">
                            </div>
                        </div>
                    </section>
                    <!-- / content -->


                </div> <!-- row -->
            </div> <!-- container -->
        </section>
        <!-- page -->
    </main>
    <!-- / content -->
</div>


<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="js/jquery-ui-1.11.0.js"></script>
<script src="js/ant/ant-utils.js"></script>
<script src="js/initCommon.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/restApi.js"></script>


<script src='vue/vue.min.js'></script>

<script type="module">

    var app = new Vue({
        el: "#content",
        data: {
            proList: {},
            project: {}
        },
        computed: {},
        methods: {
            forward: function (type) {
                var $self = this;
                restApi.getProject({"type": type}, function (data) {
                    console.log(data);
                    if (null != data.data.projectDesc) {
                        var desc = antUtils.mkExchangeArray(data.data.projectDesc);
                        data.data.desc = desc;
                    }
                    $self.project = data.data;

                    $self.proList = data.info.pojectList;
                    $(".active").removeClass("active")
                    $("." + data.data.projectCode).addClass("active");
                });
            },
            setClass(key) {
                return key;
            },
            setPath(key) {
                return key;
            },
            getImg(key) {
                return "static/images/" + key;
            }
        },
        watch: {},
        mounted() {
            antInit.init("header_project");
            console.log(antUtils);
            this.forward();
        },
        directives: {},
        components: {},
        filters: {}
    });

</script>
</body>

<!-- Mirrored from edena-creative-multipurpose-bootstrap-theme.little-neko.com/files/template-menu-left.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 25 Aug 2015 04:29:51 GMT -->
</html>
